<template>
	<footer class="footer">
		<div class="footer-header">
			<ul class="footer-header-ul">
				<li class="feiji">
					<a href="#">
						<div class="icon"></div>
						<span class="title">机票</span>
					</a>
				</li>
				<li class="feiji">
					<a href="#">
						<div class="icon"></div>
						<span class="title">酒店</span>
					</a>
				</li>
				<li class="feiji">
					<a href="#">
						<div class="icon"></div>
						<span class="title">公寓</span>
					</a>
				</li>
				<li class="feiji xian">
					<a href="#">
						<span class="a">更多</span>
					</a>
				</li>
			</ul>
		</div>
		<ul class="register">
			<li><a href="#">登录</a></li>
			<li><a href="#">我的订单</a></li>
			<li><a href="#" style="display: none">个人中心</a></li>
			<li><a href="#">最近浏览</a></li>
			<li><a href="#">关于我们</a></li>
		</ul>
		<ul class="liangzhong">
			<li class="liangzhong-left">触屏版</li>
			<li>电脑版</li>
		</ul>
		<div class="footer-bottom">
			<span>Qunar 京ICP备05021087</span>
			<a href="#" class="fankui">
				意见反馈
			</a>
		</div>
	</footer>
</template>

<script>
	export default{

	}
</script>

<style scoped lang="stylus">
	/*@import "~css/common.styl"*/
	.footer-header-ul{
		position: relative;
	    width: 300px;
	    height: 25px;
	    margin: 0 auto;
	    padding: 10px 10px 0 10px;
	    overflow: hidden;
	}
	.footer-header-ul li{
		margin: 0px;
	    padding-left: 10px;
	    height: 31px;
	    width: 65px;
	    float: left;
	    position: relative;
	    background: none;
	}
	.footer-header-ul li a{
		display: block;
	    height: 22px;
	    width: 100%;
	    font-size: 12px;
	}
	.footer-header-ul li .title{
		float: left;
	    display: inline-block;
	    color: #9e9e9e;
	    margin: 3px 0 0 5px;
	    border-bottom: 1px solid #acacac;
	    font-size: 12px;
	}
	.footer-header-ul li .a{
		display: inline-block;
		color: #9e9e9e;
		font-size: 12px;
	    border-left: 1px solid #acacac;
	    padding-left: 30px;
	    margin-top: 3px;
	}
	.footer-header-ul li .icon{
		float: left;
	    width: 22px;
	    height: 22px;
	}
	.footer{
		background: #f3f3f3;
		margin-top:10px;
		margin-bottom: 10px;
	}
	.register{
		width: 100%;
		overflow: hidden;
	    border-bottom: 1px solid #cacaca;
	}
	.register li{
		float: left;
		line-height: .1rem;
    	padding-left: 0.4rem;
	}
	.register li a{
	    color: #25a4bb;
	    font-size: .28rem;
	    line-height: .78rem;
	}
	.liangzhong{
		margin: 10px 0 0 0;
    	text-align: center;
    	color: #212121;
    	font-size: .28em;
    	display: flex;
	}
	.liangzhong li{
    	margin: 0 15px;
	}
	.liangzhong .liangzhong-left{
    	margin-left: 35%;
	}
	.footer-bottom{ 
		color: #9e9e9e;
	    text-align: center;
	    font-size: 0.28rem;
	    margin: 0.2rem;
    	height: 12px;
	}
	.footer-bottom .fankui{
		color: #9e9e9e;
	}
</style>
